<!-- 登录页面 -->
<template>
   <div class="login-container">
      <!-- 登录区域 -->
      <div class="login-box">
         <div class="avatar-box">
            <!-- <img src="../assets/logo.png" alt=""> -->
         </div>
         <!-- 登录表单区域 -->
         <el-form :model="loginForm" label-width="0px" class="login-form" :rules="loginFormRules" ref="loginFormRef">
            <!-- 用户名 -->
            <el-form-item prop="username">
               <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" placeholder="用户名"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
               <el-input 
                  v-model="loginForm.password" 
                  prefix-icon="el-icon-key" 
                  placeholder="密码" 
                  type="password"></el-input>
            </el-form-item>
            
            <el-form-item class="btns">
               <el-button :plain="true" type="primary" @click="loginCheck">登录</el-button>
               <el-button :plain="true" type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
         </el-form>
      </div>
      
   </div>
</template>

<script>
   export default {
        name: 'login',
        data() {
           return {
               loginForm: {
                  username: "admin",
                  password: "123456"
               },
               loginFormRules: {
                  username: [
                     { required: true, message: '请输入用户名', trigger: 'blur' },
                     { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
                  ],
                  password: [
                     { required: true, message: '请输入密码', trigger: 'blur' },
                     { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                  ]
               }
            }  
        },
        methods: {
            resetLoginForm: function() {
              this.$refs.loginFormRef.resetFields()
            },
            loginCheck: function() {
               this.$refs.loginFormRef.validate(async valid=>{
                  if (!valid) {
                     this.$message.error('输入有误!')
                     return
                  }
                  // 通过post方式发送http请求，后台传回的数据放入res对象
                  // 通过await等待后台传回数据后再进行下一步，使用await需要 async function
                  const {data: res} = await this.$http.post('login', this.loginForm)
                  if(res.meta.status !== 200){
                     this.$message({
                        message: '登录失败',
                        type: 'warning'
                     });
                  }
                  this.$message({
                     message: '欢迎登录',
                     type: 'success'
                  });
                  // 保存session到浏览器
                  window.sessionStorage.setItem("token", res.data.token)
                  // 跳转到home
                  this.$router.push("home")
               });
            }
        }
    }

</script>

<style lang='less' scoped>
.login-container{
   height: 100%;
   background-color: #2b4b6b;
}
.login-box{
   width: 450px;
   height: 300px;
   background-color: rgb(237, 246, 253);
   border-radius: 6px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
.avatar-box{
   height: 58px;
   width: 58px;
   background-color: rgb(121, 121, 121);
   border-radius: 5%;
   padding: 5px;
   position: absolute;
   left: 50%;
   transform: translate(-50%,28%);
   img{
      border-radius: 5%;
   }
}
.btns{
   display: flex;
   justify-content: flex-end;
}
.login-form{
   position: absolute;
   bottom: 0;
   width: 100%;
   padding: 0 50px;
   box-sizing: border-box;
}
</style>